import React, {useState, useEffect} from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';
import {useNavigate, useLocation} from 'react-router-dom';
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined';
import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';

const TabBar = () => {
    const [value, setValue] = useState(1); // 设置默认值为 1，表示选中 Tab 2
    const navigate = useNavigate();
    const location = useLocation();

    useEffect(() => {
        // 根据当前路径设置选中的标签
        const path = location.pathname;
        switch (path) {
            case '/indexPage':
                setValue(0);
                break;
            case '/searchHouse':
                setValue(1);
                break;
            case '/bigNews':
                setValue(2);
                break;
            case '/Me':
                setValue(3);
                break;
            default:
                setValue(0); // 默认值，可以根据需要调整
        }
    }, [location.pathname]);

    const handleChange = (event: any, newValue: React.SetStateAction<number>) => {
        setValue(newValue);

        // 手动导航到对应的路由
        switch (newValue) {
            case 0:
                navigate('/indexPage');
                break;
            case 1:
                navigate('/searchHouse');
                break;
            case 2:
                navigate('/bigNews');
                break;
            case 3:
                navigate('/Me');
                break;
            default:
                break;
        }
    };

    return (
        <Box>
            <Tabs value={value} onChange={handleChange} centered>
                <Tab icon={<HomeOutlinedIcon/>} label="首页"/>
                <Tab icon={<SearchOutlinedIcon/>} label="找房"/>
                <Tab icon={<ArticleOutlinedIcon/>} label="资讯"/>
                <Tab icon={<PersonOutlineOutlinedIcon/>} label="我的"/>
            </Tabs>
        </Box>
    );
};

export default TabBar;
